import {editCamera} from '@/api/videoSurveillance'
import useModal from '@/hooks/modalHook'
import {message} from '@/libs/global/antDesignVue'
import {getStorage} from '@/libs/localstoreage'
import {PropType} from 'vue'
import {CnNormalP} from '../text'

const EditCameraModal = defineComponent({
  props: {
    option: {
      type: Object as PropType<Camera.Info>,
      required: true
    }
  },
  emits: {
    success: (): boolean => true,
    error: (): boolean => true,
    load: (openModal: () => void, closeModal: () => void): boolean => true
  },
  setup(props, {emit}) {
    const {visible, closeModal, openModal} = useModal({
      closeCallback() {
        return true
      }
    })

    let dataSource = reactive<{
      url: string
      appKey: string
      secret: string
      vedioName: string
      deviceSerial: string
      channelNo: string
    }>({
      appKey: '',
      secret: '',
      vedioName: '',
      url: '',
      deviceSerial: '',
      channelNo: ''
    })

    watch(
      () => visible.value,
      n => {
        if (n) {
          initDataSource()
        }
      },
      {immediate: true}
    )
    function initDataSource() {
      dataSource.appKey = props.option.appKey
      dataSource.secret = props.option.appSecret
      dataSource.url = props.option.cameraUrl
      dataSource.vedioName = props.option.cameraName
      dataSource.deviceSerial = props.option.deviceSerial
      dataSource.channelNo = props.option.channelNo
    }

    function handleModalSubmit() {
      let userId = getStorage('userId')
      if (!userId) {
        return
      }
      if (!dataSource.vedioName) {
        message.warning('请输入摄像头名称')
        return
      }
      if (!dataSource.appKey) {
        message.warning('请输入AppKey')
        return
      }
      if (!dataSource.secret) {
        message.warning('请输入Secret')
        return
      }
      if (!dataSource.url) {
        message.warning('请输入监控预览地址')
        return
      }
      if (!dataSource.deviceSerial) {
        message.warning('请输入设备序列号')
        return
      }
      if (!dataSource.channelNo) {
        message.warning('请输入通道号')
        return
      }
      editCamera({
        cameraName: dataSource.vedioName,
        appSecret: dataSource.secret,
        appKey: dataSource.appKey,
        cameraUrl: dataSource.url,
        cameraId: props.option.cameraId,
        deviceSerial: dataSource.deviceSerial,
        channelNo: dataSource.channelNo
      })
        .then(res => {
          closeModal()
          emit('success')
        })
        .catch(err => {
          emit('error')
        })
    }
    onMounted(() => {
      emit('load', openModal, closeModal)
    })
    return () => (
      <a-modal
        title='修改萤石云摄像头配置信息'
        v-model={[visible.value, 'visible']}
        onOk={handleModalSubmit}
        onCancel={closeModal}
      >
        <a-form
          class='p-32'
          labelCol={{
            span: 5
          }}
        >
          <a-form-item label='摄像头名称：'>
            <a-input v-model={[dataSource.vedioName, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>对摄像头命名</CnNormalP>
          </a-form-item>
          {/* <a-form-item label='AppKey：'>
            <a-input v-model={[dataSource.appKey, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-账号中心-应用信息-应用秘钥-AppKey
            </CnNormalP>
          </a-form-item>
          <a-form-item label='Secret：'>
            <a-input v-model={[dataSource.secret, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-账号中心-应用信息-应用秘钥-Secret
            </CnNormalP>
          </a-form-item>
          <a-form-item label='设备序列号：'>
            <a-input v-model={[dataSource.deviceSerial, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-设备管理-设备序列号
            </CnNormalP>
          </a-form-item>
          <a-form-item label='通道号：'>
            <a-input v-model={[dataSource.channelNo, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-设备管理-查看通道-通道号
            </CnNormalP>
          </a-form-item>
          <a-form-item label='监控预览地址：'>
            <a-input v-model={[dataSource.url, 'value']}></a-input>
            <CnNormalP class='text-12 mt-8 whitespace-pre-wrap'>
              所在位置：萤石云开放平台-设备管理-查看通道-监控地址-预览地址
            </CnNormalP>
          </a-form-item> */}
        </a-form>
      </a-modal>
    )
  }
})

export default EditCameraModal
